import VueRouter from "vue-router";

// 定义路由
const routes = [
  {
    path: "/layout",
    name: "Layout",
    component: () => import("@/Layout/Layout.vue"), // 修改为正确的动态导入语法
    meta: {
      title: "首页",
    },
    children: [
      {
        path: "", // 空路径-，表示默认子路由
        redirect: "home", // 重定向到首页
      },
      {
        path: "/layout/home", // 默认子路由
        name: "Home",
        component: () => import("@/views/home/index.vue"),
      },
      // 图片懒加载
      {
        path: "/layout/lazyLoad",
        name: "LazyLoad",
        component: () => import("@/views/lazyload/index.vue"),
      },
      // css
      {
        path: "/layout/css",
        name: "Css",
        component: () => import("@/views/css/index.vue"),
      },
      // 文件上传
      {
        path: "/layout/upload-file",
        name: "upload-file",
        component: () => import("@/views/upload-file/index.vue"),
      },
      // 文件预览
      {
        path: "/file-preview",
        name: "file-preview",
        component: () => import("@/views/file-preview/index.vue"),
      },
    ],
  },
  // 重定向到首页
  {
    path: "/",
    name: "Home",
    redirect: "/layout", // 重定向到首页
  },
  {
    path: "*",
    name: "NotFound",
    component: () => import("@/views/404NotFound/index.vue"),
  },
  // 嵌套路由示例
  // {
  //     path: '/user',
  //     name: 'User',
  //     component: () => import('../views/User.vue'),
  //     children: [
  //         {
  //             path: 'profile',
  //             name: 'UserProfile',
  //             component: () => import('../views/user/Profile.vue')
  //         },
  //         {
  //             path: 'settings',
  //             name: 'UserSettings',
  //             component: () => import('../views/user/Settings.vue')
  //         }
  //     ]
  // }
  // // 404页面
];

// 创建路由实例
const router = new VueRouter({
  mode: "history",
  routes,
});

export default router;
